<template>
  <el-container>
    <!-- 标题 -->
    <el-header>
      <h1>注册</h1>
    </el-header>
    <el-main>
      <el-form class="useForm" ref="enrollForm" label-position="right" label-width="auto" :model="form" :rules="enrollRules">
        <!--填写框-->
        <el-form-item prop="name" label="账号名称">
          <el-input v-model="form.name" style="width: 240px" placeholder="账户长度小于16" clearable/>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input v-model="form.password" style="width: 240px" placeholder="密码长度大于6小于16" clearable/>
        </el-form-item>

        <el-form-item v-if="form.password.length > 5" prop="confirmPassword" label="请再次输入密码">
          <el-input v-model="form.confirmPassword" style="width: 240px" placeholder="请再次输入密码" clearable/>
        </el-form-item>


        <el-form-item prop="email" label="请输入邮箱">
          <el-input v-model="form.email" style="width: 240px" placeholder="请输入邮箱" clearable/>
        </el-form-item>

        <el-form-item label="性别">
          <el-radio-group v-model="form.resource">
            <el-radio value="男">男</el-radio>
            <el-radio value="女">女</el-radio>
          </el-radio-group>
        </el-form-item>


        <el-button @click="enrollItem" type="primary">提交并注册</el-button>

      </el-form>
    </el-main>
    <el-footer>
      <h5>
        已有账户？
        <router-link to="/LoginAndRegistration/login">点击登录</router-link>
      </h5>
    </el-footer>
  </el-container>
</template>

<script setup>
import {sengEnroll} from '@/uitlsJs/Axios/api/userLogin';
import {onBeforeMount, ref} from "vue"
import frameStyle from './frameStyle'
import {useRouter} from 'vue-router'
import {ElMessage} from 'element-plus'

const emit = defineEmits(['frameSize']);
onBeforeMount(() => {
  emit("frameSize", frameStyle.enroll);
});


const form = ref({
  password: '',
  confirmPassword: '',
  email: '',
  name: '',
  resource: '男',
})

//再次确认密码的规则
const confirmPasswordRules = (rule, value, callback) => {
  if (form.value.password === '') {

    callback(new Error("输入上一次的密码"))
  } else if (value !== form.value.password) {
    callback(new Error("输入的密码与上一次密码不匹配!!"))
  } else {
    callback()
  }
}
//注册表单验证规则
const enrollRules = {
  name: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
    {max: 16, message: '输入用户名长度过长', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {min: 6, max: 16, message: '输入密码长度不对', trigger: 'blur'},
  ], confirmPassword: [
    {required: true, message: '请再次输入密码', trigger: 'blur'},
    {validator: confirmPasswordRules, trigger: 'blur'}
  ], email: [
    {required: true, message: '请输入邮箱', trigger: 'blur'},
    {type: 'email', message: '请输入正确的电子邮件地址', trigger: 'blur'},
  ],
}
//注册表单
const enrollForm = ref(null);
//获取路由
const router = useRouter();

//注册表单提交
function enrollItem() {
  //校验表单
  enrollForm.value.validate(volid => {
    if (volid) {
      let {name, password, resource, email} = form.value
      //发送请求
      sengEnroll(name, password, resource, email).then((res) => {
        let {code} = res.data
        if (code) {
          ElMessage("注册成功")
          router.push({path: "/LoginAndRegistration/login"});
        }
      });
    }
  })

}
</script>

<style src="./loginIsEnroll.css" scoped></style>
